<template>
  <div>
    <div id="main" :style="{ width: '100%', height: height }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    height: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      myChart: null,
      // 准备数据（模拟后端返回）
      lane1: [100, 150, 200],
      lane2: [150, 50, 100],
      lane3: [10, 50, 30],
      gantry: [1000, 1500, 200],
      
    }
  },
  mounted() {
    this.getEcharts()
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    if(!this.myCharts){
      return
    }
    window.removeEventListener("resize", this.resize);
    this.myCharts.dispose()
  },
  methods: {
    // 设置容器以及数据配置 
    getEcharts() {
      this.myChart = echarts.init(document.getElementById("main"));
      this.myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ['车道1', '车道2', '车道3', '门架'],
          top: 10, // 距离顶部的位置
          textStyle: {
            color: '#000' // 字体颜色
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["省内", "省外", "其他"],
            axisLabel: {
              // interval: 0,
              // rotate: 45, //避免X轴数据太长 倾斜度 -90 至 90 默认为0
              // margin: 2,
              textStyle: {
                fontWeight: "bolder",
                color: "#000",
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '车道/个',
            nameTextStyle: {
              color: "#000",
              fontSize: 12,
            },
            splitLine: {
              show: true,
              lineStyle: { // 设置线的样式
                type: 'dashed',
                color: 'rgba(0, 0, 0, 0.3)'
              }
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                fontWeight: "bolder",
                color: "#000",
              },
            }
          },
          {
            type: 'value',
            name: '门架/个',
            nameTextStyle: {
              color: "#000",
              fontSize: 12,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255,255,255,0.3)'
              }
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                fontWeight: "bolder",
                color: "#000",
              },
            }
          }
        ],
        series: [
          {
            name: "车道1",
            type: "bar",
            barWidth: '20%', // 柱状图柱子的宽度
            stack: "Ad", // stack值相同则堆叠
            emphasis: {
              focus: "series",
            },
            data: this.lane1, // 数据源
            itemStyle: {
              color: '#287CE7' // 柱状图的颜色
            },
          },
          {
            name: "车道2",
            type: "bar",
            barWidth: '20%',
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: this.lane2,
            itemStyle: {
              color: '#30C6DC'
            },
          },
          {
            name: "车道3",
            type: "bar",
            barWidth: '20%',
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: this.lane3,
            itemStyle: {
              color: '#F4CF3D'
            },
          },
          {
            name: "门架",
            type: "bar",
            yAxisIndex: 1, // k开启双y轴
            barWidth: '20%',
            data: this.gantry,
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              color: '#7B6DFE'
            },
          }
        ],
      })
    },
    // 页面缩放
    resize() {
      this.myChart.resize();
    },

  }
}
</script>

<style lang="sass" scoped>

</style>